<template>
    <div class="template-index-Lu">
        <commpVxeTable
            :key="reCommpVxeTable"
            :conditionBtnRow="true"
            :config="dataTableConfig"
            :columns="columnsVxe"
            :formItem="formItem"
            @checkboxChange="checkboxChange"
            ref="administrativeOffice"
            @searchEvent="searchEvent"
            @resetEvent="resetEvent"
            >
            <template v-slot:lgtime_slot>
                <a-range-picker
                    @change="flgsjChange"
                    v-model="time"
                    :show-time="{
                        hideDisabledOptions: true,
                        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
                    }"
                    format="YYYY-MM-DD HH:mm:ss"
                />
            </template>
            <template v-slot:externalOperations="{data}"  >
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" @click="addClick">离岗申请</a-button>
                    </template>
                </vxe-form-item>
                <vxe-form-item>
                    <template>
                        <a-button class="red-btn" @click="deletesClick">批量删除</a-button>
                    </template>
                </vxe-form-item>
            </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline">
                    <a-form-item>
                        <a-button class="blue-btn" @click="reviseClick(row)">办理</a-button>
                    </a-form-item>
                    <a-form-item>
                        <a-popconfirm
                            title="您确定要删除这条申请吗?"
                            ok-text="确定"
                            cancel-text="取消"
                            @confirm="deleteClick(row)"
                            @cancel="cancel"
                            >
                            <a-button class="red-btn">删除</a-button>
                        </a-popconfirm>
                    </a-form-item>
                    <a-form-item>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <applicationForm ref="applicationFormRef" :linkName="linkName" :formData="formData" @success="success"></applicationForm>
    </div>
</template>
<script>
import  assessCheckApi  from './service/api.js'
import  commpVxeTable   from '@/components/commp-vxe-table/commp-vxe-table.vue'
import  applicationForm  from './applicationForm.vue'
import  {deleteLgqsFlowJob,}  from './service/index.js'
import  moment  from 'moment'
export default {
    components: {
        commpVxeTable,
        applicationForm
    },
    props:{
        linkName:{
            type:String,
            default:'',
            required:false,
        },
        stepNum:{
            type:String,
            default:'',
            required:false,
        }
    },
    data() {
        return {
            moment,
            fhgsj: '',
            flgsj: '',
            time: '',
            stepNums: 0,
            reCommpVxeTable: '',
            dataTableConfig: {
                api: assessCheckApi.list,
                rowId: 'id',
                urlType: true,
                paramet: {
                fhjmc: this.linkName,
                }
            },
            columnsVxe: [
            {
                type: 'checkbox',
                width: 60,
                fixed: 'left'
                },{
                title: '姓名',
                field: 'fxm',
                width: 100,
                },{
                title: '填报部门',
                field: 'ftbbm',
                width: 150,
                },{
                title: '离岗（请假）事由',
                field: 'flgsy',
                },{
                title: '离岗时间',
                field: 'flgsj',
                width: 150,
                },{
                title: '发送时间',
                field: 'ffssj',
                width: 150,
                },{
                title: '退回意见',
                field: 'fthyj',
                },{
                title: '操作',
                field: 'jobid',
                width: 200,
                slots: {
                // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                }
            ],
            formItem: [
                {
                    label: '离岗时间',
                    model: 'flgsj',
                    slotName:'lgtime_slot'
                },
            ],
            jobidList: [],
            formData: {},
        }
    },
    methods: {
        // 离岗时间
        flgsjChange(date, dateString){
            this.flgsj = dateString[0]
            this.fhgsj = dateString[1]
        },
        // 勾选
        checkboxChange(val){
            //console.log('已选择',val)
            this.jobidList = []
            if(val.length){
                val.forEach(item => {
                    this.jobidList.push(item.jobid)
                });
            }
        },
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
                fhgsj: this.fhgsj,
                flgsj: this.flgsj,
            }
            //console.log(this.dataTableConfig.paramet)
        },
        // 重置
        resetEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
                // fhgsj : '',
                // flgsj : ''
            }
            this.fhgsj = ''
            this.flgsj = ''
            this.time = ''
        },
        // 请假申请
        addClick(){
            this.$nextTick(_ => {
                this.$refs.applicationFormRef.applicationFormVisible = true
            })
        },
        // 点击办理
        reviseClick(row){
            //console.log('办理',row)
            this.formData = {
                ...row
            }
            let jobid = row.jobid
            // queryJobByJobId({jobid:jobid}).then(res => {
            //     //console.log(res)
            // })
            this.formData.id = row.oaid
            this.$nextTick(_ => {
                this.$refs.applicationFormRef.applicationFormVisible = true
            })
        },
        // 删除
        deleteClick(row){
            deleteLgqsFlowJob({jobids:row.jobid}).then(res => {
                if(res.code == 200){
                    this.reCommpVxeTable = Date.now()
                    this.$message.success(res.message)
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        // 批量删除
        deletesClick(){
            if(this.jobidList.length !== 0){
                let data = {
                    jobids: this.jobidList.toString()
                }
                deleteLgqsFlowJob(data).then(res => {
                    if(res.code == 200){
                        this.reCommpVxeTable = Date.now()
                        this.$message.success(res.message)
                    } else {
                        this.$message.warning(res.message)
                    }
                })
            } else {
                this.$message.warning('请选择删除项')
            }
        },
        cancel(e) {
            //console.log(e);
        },
        // 弹窗提交成功
        success(){
            // 刷新表格 清空id数组
            this.$refs.administrativeOffice.resetEvent()
            this.jobidList = []
        }
    },
}
</script>
<style>
@import url('../../css/oaClass.css');
</style>
